【vue3.0】7.0 某东到家（七）

2023-04-07 19:36| 来源: 网络整理| 查看: 265

有这么一个设定

先登录才能看到首页面。将项目src/App.vue修改：

import Login from '@/views/login/Login' export default { name: 'App', components: { Login } }

新建src\views\login\Login.vue:

登陆立即登陆忘记密码 export default {} .wrapper { position: absolute; left: 0; top: 50%; right: 0; transform: translateY(-50%); } image.png

调整优化：

进一步优化输入框

&__input { height: 0.48rem; margin: 0 0.4rem 0.16rem 0.4rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.06rem; &__content { line-height: 0.48rem; background: none; border:none; outline:none; width: 100%; } } image.png

最终调整输入框：

登陆立即登陆忘记密码 export default { name: 'Login' } .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto 0.4rem auto; width: 0.66rem; height: 0.66rem; } &__input { // box-sizing: border-box;//内部间距 height: 0.48rem; margin: 0 0.4rem 0.16rem 0.4rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.06rem; &__content { line-height: 0.48rem; background: none; border: none; outline: none; width: 100%; font-size: 0.16rem; color: rgba(0, 0, 0, 0.5); &::placeholder { color: rgba(0, 0, 0, 0.5); } } } } image.png

调整登陆按钮：

&__login-button { line-height: 0.48rem; margin: 0.32rem 0.4rem 0 0.4rem; background: #0091ff; color:#fff; box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32); border-radius: 0.04rem; font-size: 0.16rem; text-align: center; } image.png

继续优化：

登陆立即登陆

忘记密码 export default { name: 'Login' } .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto 0.4rem auto; width: 0.66rem; height: 0.66rem; } &__input { // box-sizing: border-box;//内部间距 height: 0.48rem; margin: 0 0.4rem 0.16rem 0.4rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.06rem; &__content { line-height: 0.48rem; background: none; border: none; outline: none; width: 100%; font-size: 0.16rem; color: rgba(0, 0, 0, 0.5); &::placeholder { color: rgba(0, 0, 0, 0.5); } } } &__login-button { line-height: 0.48rem; margin: 0.32rem 0.4rem 0.16rem 0.4rem; background: #0091ff; color: #fff; box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32); border-radius: 0.04rem; font-size: 0.16rem; text-align: center; } &__login__item { text-align: center; &__link { display: inline-block; margin: auto 0.05rem auto 0.05rem; text-align: center; font-size: 0.14rem; color: rgba(0, 0, 0, 0.5); } &__cut { display: inline-block; text-align: center; font-size: 0.14rem; margin: auto 0.05rem auto 0.05rem; } &__password { display: inline-block; text-align: center; font-size: 0.14rem; margin: auto 0.05rem auto 0.05rem; color: rgba(0, 0, 0, 0.5); } } } image.png

因为我们的文字背后是纯白色，所以这样的情况下首先考虑#号颜色，而不是透明色，比如rgba(0, 0, 0, 0.5)可以替换成#777，并做一下抽离：修改src\style\viriables.scss:

/** * 内容主体文字颜色 **/ $content-font-color: #333; /** * 无内容、背景灰、留白灰的颜色 **/ $content-bg-color: #f1f1f1; /** * 文字灰色字体 * **/ $centent-notice-fontcolor: #777;

修改src\views\login\Login.vue:

登陆立即登陆

忘记密码 export default { name: 'Login' } @import '@/style/viriables'; .wrapper { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); &__img { display: block; margin: 0 auto 0.4rem auto; width: 0.66rem; height: 0.66rem; } &__input { // box-sizing: border-box;//内部间距 height: 0.48rem; margin: 0 0.4rem 0.16rem 0.4rem; background: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.06rem; &__content { line-height: 0.48rem; background: none; border: none; outline: none; width: 100%; font-size: 0.16rem; color: $centent-notice-fontcolor; &::placeholder { color: $centent-notice-fontcolor; } } } &__login-button { line-height: 0.48rem; margin: 0.32rem 0.4rem 0.16rem 0.4rem; background: #0091ff; color: #fff; box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32); border-radius: 0.04rem; font-size: 0.16rem; text-align: center; } &__login__item { text-align: center; &__link { display: inline-block; margin: auto 0.05rem auto 0.05rem; text-align: center; font-size: 0.14rem; color: $centent-notice-fontcolor; } &__cut { display: inline-block; text-align: center; font-size: 0.14rem; margin: auto 0.05rem auto 0.05rem; } &__password { display: inline-block; text-align: center; font-size: 0.14rem; margin: auto 0.05rem auto 0.05rem; color: $centent-notice-fontcolor; } } }

image.png 修改一下路由src\router\index.js：

import { createRouter, createWebHistory } from 'vue-router' const routes = [{ path: '/', name: 'Home', component: () => import(/* webpackChunkName: "home" */ '../views/home/Home.vue') }, { path: '/login', name: 'Login', component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router

访问http://localhost:8080/login可以切换访问不同的页面了。

【本文地址】

公司简介

联系我们